{% extends 'base.html' %}
{% load static %}

{% block title %}{{ gallery.title }} - {{ site_settings.site_name|default:"خبرگزاری ایثار" }}{% endblock %}

{% block content %}
<div class="article-detail">
    <h1><i class="fas fa-images"></i> {{ gallery.title }}</h1>
    <div class="meta-info">
        <span><i class="fas fa-calendar-alt"></i> {{ gallery.publish_time|date:"Y/m/d" }}</span>
        <span><i class="fas fa-image"></i> {{ images.count }} تصویر</span>
    </div>
    {% if gallery.description %}
    <div class="body-text">
        <p>{{ gallery.description|linebreaks }}</p>
    </div>
    {% endif %}
</div>

<!-- اسلایدر گالری -->
{% if images %}
<div class="gallery-slider">
    {% for image in images %}
    <div class="slide {% if forloop.first %}active{% endif %}" style="background-image: url('{{ image.image.url }}');">
        <div class="caption">
            <h3>{{ image.title|default:gallery.title }}</h3>
        </div>
    </div>
    {% endfor %}
    
    <div class="dots">
        {% for image in images %}
        <span class="dot {% if forloop.first %}active{% endif %}"></span>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- نمایش تصاویر به صورت گرید -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 25px;">
    {% for image in images %}
    <div style="border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
        <img src="{{ image.image.url }}" alt="{{ image.title|default:gallery.title }}" style="width:100%; height:200px; object-fit:cover; transition:0.3s;">
        <div style="padding:8px 12px; background:#fff; font-size:13px; color:#6c7065; text-align:center;">
            {{ image.title|default:"بدون عنوان" }}
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}